<template>
  <div class="stock">
    <v-navigation-drawer permanent app>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title class="title">
            Stock Management
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <v-divider></v-divider>

      <v-list
        dense
        nav
      >
        <v-list-item
          v-for="item in items"
          :key="item.title"
          link
          :to="'/stock/' + item.to"
        >
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-container>
      <router-view/>
    </v-container>
  </div>
</template>

<script>
  export default {
    name: 'stock',
    data: () => ({
      items: [
        { title: 'Sale', icon: 'mdi-cash-100', to: 'sale' },
        { title: 'Inventory', icon: 'mdi-truck', to: 'inventory' },
      ]
    }),
    mounted() {
      this.$router.push('/stock/sale');
    }
  };
</script>
